Tengo un problema con una función que selecciona elementos activos. Hay algunos campos de entrada/etiqueta con sectoins (una sección, un elemento activo/en el que se hizo clic). Solo funciona cuando hago doble clic. Si hago clic una vez, no hay resultado. Puedo configurar setTimeout para ese código y luego funciona, pero no siempre.
Ejemplo:
var radios = document.querySelectorAll('#calculator input[type=radio]'); var label = document.querySelectorAll("#calculator label"); function active(e) { radios.forEach((el,index) => { if(el.checked === true) { console.log('true'); label[index].classList.add('active'); } else { console.log('false'); label[index].classList.remove('active'); } }) }Ejemplo de campo html:
<input id="p75" type="radio" name="geodesic_size" value="11250" > <label for="p75"> <input id="p30" type="radio" name="geodesic_size" value="5626" checked> <label for="p30">No estoy seguro de si esto es lo que necesita, pero aquí hay un ejemplo de alternar la clase active cuando cambia la entrada marcada:
const radios = document.querySelectorAll('input[type="radio"]'); const label = document.querySelectorAll("label"); function active(e) { radios.forEach((el,index) => { if(el.checked === true) { console.log('true'); label[index].classList.add('active'); } else { console.log('false'); label[index].classList.remove('active'); } }) } radios.forEach(el => { el.addEventListener('change', active); }) .active { color: red; } <input id="p75" type="radio" name="geodesic_size" value="11250" > <label for="p75">First</label> <input id="p30" type="radio" name="geodesic_size" value="5626" checked> <label for="p30" class="active">Second</label>Las otras respuestas parecen funcionar bien, solo agregaría un par de sugerencias:
En primer lugar, también puede acceder a las etiquetas asociadas a un elemento con HTMLInputElement.labels . En mi opinión, usar el.labels[0] sería un poco más sólido que confiar en que el índice del botón de opción y la etiqueta sean iguales.
Si todo lo que necesita hacer es alternar una clase active como esta, puede lograr lo mismo con CSS solo usando el combinador de hermanos adyacente (+) y deshacerse de todo el JavaScript:
input:checked + label { color: red; } <div> <input id="p75" type="radio" name="geodesic_size" value="11250"> <label for="p75">p75</label> </div> <div> <input id="p30" type="radio" name="geodesic_size" value="5626" checked> <label for="p30">p30</label> </div><div id="calculator"></div> .Como
#calculator input[type=radio]esto significa seleccionar todas las entradas con tipo igual a radio, que son hijos de id#calculator.
onclick y coloque su lógica para la función active() allí..active{background-color:red;} css. var radios = document.querySelectorAll('#calculator input[type=radio]'); var label = document.querySelectorAll("#calculator label"); radios.forEach(radioBtn => { radioBtn.onclick = function() { radios.forEach((el, index) => { console.log(el.checked); if (el.checked === true) { console.log('true'); label[index].classList.add('active'); } else { console.log('false'); label[index].classList.remove('active'); } }) }; }) .active { background-color: red; } <div id="calculator"> <input id="p75" type="radio" name="geodesic_size" value="11250"> <label for="p75">p75</label> <input id="p30" type="radio" name="geodesic_size" value="5626" checked> <label for="p30">p30</label> </div>